import Vue from 'vue';
import Store from '@/views/store-settings/Store';
import { LIST_NAME } from '@/views/store-settings/constants';
import { HeaderForm, Table, EditStoreModal, ImportStoreModal } from '@/views/store-settings/components';
import { TOP_CHANNELS } from '@/constants';

Vue.component(HeaderForm.name, HeaderForm);
Vue.component(Table.name, Table);
Vue.component(EditStoreModal.name, EditStoreModal);
Vue.component(ImportStoreModal.name, ImportStoreModal);

export default {
  metaInfo: {
    title: '门店设置',
  },
  data() {
    return {
      store: new Store([{ listName: LIST_NAME }]),
      topChannelList: TOP_CHANNELS,
    };
  },
  methods: {
    handleCurrentChange() {},
    ...[
      'pageSizeChange',
      'pageNumChange',
      'queryStoreSettings',
      'onClose',
      'onOpenEditModal',
      'onOpenImportModal',
      'onCloseImport',
      'resetTable',
      'exportChannelStores',
      'onDelete',
    ].reduce(
      (prev, curr) => ({
        ...prev,
        [curr](e) {
          this.store[curr](e);
        },
      }),
      {},
    ),
  },
  computed: {
    ...[
      'formQueryValue',
      'list',
      'querying',
      'visible',
      'storeFormValue',
      'importVisible',
      'cellularList',
      'cellularMap',
      'areaList',
      'exporting',
      'deleting',
      'cityList',
    ].reduce(
      (prev, curr) => ({
        ...prev,
        [curr]: {
          get() {
            if (curr === 'list') {
              const { data = [], ...restParams } = this.store[curr][LIST_NAME];
              this.store.querying = this.store[curr][LIST_NAME].loading;
              return {
                ...restParams,
                data: data,
              };
            }
            return this.store[curr];
          },
        },
      }),
      {},
    ),
  },
  async created() {},
  async mounted() {
    this.store.init();
  },
};
